<template>
   <div id="personage">
     <div id="hearder">
       <router-link to='/index/my'>
       <van-icon id="fanhui" name="arrow-left" />
       </router-link>
       <p id="ge">个人资料</p>
     </div>
     <div id="nei">
       <div id="tou">
         <p id="zi">头像</p>
         <div id="tou_tou"></div>
         <van-icon id="tou_you" name="arrow" />
       </div>
       <div id="ni">
         <p id="ni_zi">昵称</p>
         <span>A.潮鞋[爱心]私聊[右指]低</span>
         <van-icon id="ni_you" name="arrow" />
       </div>
       <div id="iphone">
         <p id="iphone_zi">手机号</p>
         <span>15630026819</span>
         <van-icon id="iphone_you" name="arrow" />
       </div>
       <div id="shengri">
         <p id="shengri_zi">生日</p>
         <span>2000-10</span>
         <van-icon id="shengri_you" name="arrow" />
       </div>
       <div id="tuichu">
         <p id="tuichu_zi">退出登录</p>
         <van-icon id="tuichu_you" name="arrow" />
       </div>
       <div id="yinsi">
         <p id="yinsi_zi">隐私政策</p>
         <van-icon id="yinsi_you" name="arrow" />
       </div>
       <div id="user">
         <p id="user_zi">用户协议</p>
         <van-icon id="user_you" name="arrow" />
       </div>
       <div id="btn">
         保存
       </div>
     </div>
     
    
   </div>
</template>

<script lang="ts">

</script>

<style lang="scss" scoped>
#hearder{
  width: 100%;
  height: 100px;
  line-height: 100px;
  
}
#fanhui{
  font-size: 36px;
}
#ge{
  margin-left: 160px;
  margin-top: -120px;
}
#nei{
  width: 100%;
}
#tou{
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  display: flex;
  line-height: 60px;
}
#zi{
  margin-left: 10px;
  margin-top: 10px;
}
#tou_tou{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  margin-left: 260px;
  margin-top: 10px;
}
#tou_you{
  font-size: 24px;
  // margin-left: 265px;
  margin-top: 20px;
}
#ni{
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content:space-around;
}
#ni_zi{
  margin-right: 80px;
}
#ni_you{
  font-size: 24px;
  margin-top: 10px;
}

#iphone{
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content:space-around;
}
#iphone_zi{
  margin-right: 145px;
}
#iphone_you{
  font-size: 24px;
  margin-top: 10px;
}
#shengri{
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content:space-around;
}
#shengri_zi{
  margin-right: 195px;
}
#shengri_you{
  font-size: 24px;
  margin-top: 10px;
}
#tuichu{
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content:space-around;
}
#tuichu_zi{
  margin-right: 245px;
}
#tuichu_you{
  font-size: 24px;
  margin-top: 10px;
}
#yinsi{
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content:space-around;
}
#yinsi_zi{
  margin-right: 245px;
}
#yinsi_you{
  font-size: 24px;
  margin-top: 10px;
}
#user{
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content:space-around;
}
#user_zi{
  margin-right: 245px;
}
#user_you{
  font-size: 24px;
  margin-top: 10px;
}
#btn{
  width: 90%;
  height: 40px;
  border: 1px solid purple;
  color: purple;
  text-align: center;
  line-height: 40px;
  margin: 20px 20px;
  border-radius: 20px;
}

</style>